<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f0f2f5;
      margin: 0;
      padding: 0;
      color: #333;
    }
    .container {
      display: flex;
      max-width: 900px;
      margin: 20px auto;
      padding: 20px;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .data-section {
      flex: 1;
    }
    h1, h2 {
      color: #2c3e50;
      margin-bottom: 20px;
    }
    .search-group {
      margin-bottom: 15px;
    }
    .tabs {
      margin-bottom: 20px;
    }
    .tab-button {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      margin-right: 5px;
      transition: background-color 0.3s;
    }
    .tab-button:hover {
      background-color: #0056b3;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 10px;
      text-align: left;
      font-size: 14px;
    }
    th {
      background-color: #007bff;
      color: white;
    }
    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    tr:hover {
      background-color: #e2e6ea;
    }
    .delete-button {
      background-color: #dc3545;
      color: white;
      border: none;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      margin-left: 10px;
      transition: background-color 0.3s;
    }
    .delete-button:hover {
      background-color: #c82333;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="data-section">
      <h2>DATA TABLE</h2>
      <div class="search-group">
        <label for="search-date">Search by Date and Start Time:</label>
        <input type="text" id="search-date" onkeyup="filterEntries()" placeholder="Search for date and time...">
      </div>
      <input type="button" value="Refresh Data" onclick="fetchData()" style="margin-bottom: 20px;">
      <input type="button" value="Delete Selected" onclick="deleteSelected()" style="margin-bottom: 20px;">

      <div id="tabs" class="tabs"></div>

      <table id="data-table">
        <thead>
          <tr>
            <th>Select</th>
            <th>Email</th>
            <th>Case Number</th>
            <th>Start Time</th>
            <th>Stop Time</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>

  <script>
    let dataStore = [];

    function displayData(data) {
      const tbody = document.querySelector('#data-table tbody');
      tbody.innerHTML = '';

      dataStore = data; // Save data for potential use
      const uniqueEmails = new Set();

      data.forEach(row => {
        const tr = document.createElement('tr');

        // Checkbox for row selection
        const tdCheckbox = document.createElement('td');
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        tdCheckbox.appendChild(checkbox);
        tr.appendChild(tdCheckbox);

        row.forEach(cell => {
          const td = document.createElement('td');
          td.textContent = cell;
          tr.appendChild(td);
        });
        
        tbody.appendChild(tr);
        uniqueEmails.add(row[0]); // Add email to the set
      });

      displayTabs([...uniqueEmails]);
    }

    function displayTabs(emails) {
      const tabsContainer = document.getElementById('tabs');
      tabsContainer.innerHTML = ''; // Clear existing tabs

      emails.forEach(email => {
        const tabButton = document.createElement('button');
        tabButton.className = 'tab-button';
        tabButton.textContent = email.substring(0, 6).toUpperCase(); // Display first 6 characters in uppercase

        tabButton.onclick = () => showEmailData(email);
        tabsContainer.appendChild(tabButton);
      });
    }

    function showEmailData(email) {
      const filteredData = dataStore.filter(row => row[0] === email);
      displayData(filteredData); // Reuse displayData to show filtered data
    }

    function fetchData() {
      google.script.run.withSuccessHandler(displayData).getData();
    }

    function filterEntries() {
      const searchValue = document.getElementById('search-date').value.toLowerCase();
      const rows = document.querySelectorAll('#data-table tbody tr');

      rows.forEach(row => {
        const startTimeCell = row.cells[3].textContent.toLowerCase(); // Check against Start Time
        row.style.display = startTimeCell.includes(searchValue) ? '' : 'none';
      });
    }

    function deleteSelected() {
      const rows = document.querySelectorAll('#data-table tbody tr');
      const selectedRowIndices = [];

      rows.forEach((row, index) => {
        const checkbox = row.querySelector('input[type="checkbox"]');
        if (checkbox && checkbox.checked) {
          selectedRowIndices.push(index); // Collecting row indices
        }
      });

      if (selectedRowIndices.length > 0) {
        google.script.run.withSuccessHandler(() => {
          fetchData(); // Refresh data after deletion
        }).deleteData(selectedRowIndices); // Call to delete function in backend
      } else {
        alert('Please select at least one row to delete.');
      }
    }

    fetchData(); // Initial fetch to load data
  </script>
</body>
</html>
